vertical alignment
revision:
using flexbox
using flexbox : "align-items" - "justify-items"
code:
<div class="container">
<div class="element">Centered</div>
</div>
<style>
.container { display: flex; justify-content: center; /* Horizontally centering */
align-items: center; /* Vertically centering */ /* Only for styling */
height: 40vh; border: 0.2vw solid #0077cc;}
.element { /* Only for styling */ background-color: #0077cc; text-align: center;
color: white; height: 40px; width: 120px; line-height: 40px;}
</style>
using flexbox : "align-self"
code:
<div class="container-1">
<div class="element-1 align-start">Start</div>
<div class="element-1 align-center">Center</div>
<div class="element-1 align-end">End</div>
</div>
<style>
.container-1 {display: flex; height: 40vh; border: 0.2vw solid #0077cc; padding: 1.25vw;}
.align-center {align-self: center; /* Vertically centering */}
.align-start {align-self: start; }
.align-end {align-self: end; }
.element-1 {margin: 0 auto; /* Horizontally center the item */ background-color: #0077cc;
text-align: center; color: white; height: 2.5vw; width: 7.5vw; line-height: 2.5vw; }
</style>
using flexbox : "margin: auto"
code:
<div class="container-2">
<div class="element-2">Centered</div>
</div>
<style>
.container-2 { display: flex; height: 40vh; border: 0.2vw solid #0077cc; }
.element-2 { margin: auto; height: 3.125vw; width: 9.375vw; background-color: #0077cc;
text-align: center; color: white; line-height: 3.125vw;}
</style>
using flexbox : "align-content"
code:
<div class="container-3">
<div class="element-3">Centered</div>
</div>
<style>
.container-3 {align-content: center; border: 2px solid #0077cc; height: 40vh; padding: 1.25vw;}
.element-3 { width: 7.5vw; height: 7.5vw; background-color: #0077cc;}
</style>
using flexbox with pseudo-elements
code:
<div class="container-4">
<div class="element-4">Centered</div>
</div>
<style>
.container-4 {display: flex; flex-direction: column; height: 40vh; border: 0.2vw solid #0077cc;}
.container-4::before, .container-4::after {content: ""; flex: 1;}
.element-4 {margin: 0 auto; width: 7.5vw; height: 2.5vw; background-color: #0077cc;
text-align: center; color: white; line-height: 2.5vw;}
</style>
using CSS grid
using CSS grid : "align-items" - "justify-content"
code:
<div class="container-5">
<div class="element-5">Centered</div>
</div>
<style>
.container-5 {display: grid; align-items: center; justify-content: center; height: 40vh;
border: 0.2vw solid #0077cc;}
.element-5 { width: 7.5vw; height: 2.5vw; background-color: #0077cc; text-align: center;
color: white; line-height: 2.5vw;}
</style>
using CSS grid : "align-slef" - "justify-self"
code:
<div class="container-6">
<div class="element-6">Centered</div>
</div>
<style>
.container-6 {display: grid; height: 40vh; border: 0.2vw solid #0077cc;}
.element-6 {align-self: center; justify-self: center; width: 7.5vw; height: 2.5vw;
background-color: #0077cc; text-align: center; color: white; line-height: 2.5vw;}
</style>
using CSS grid : "place-items:center"
code:
<div class="container-7">
<div class="element-7"></div>
</div>
<style>
.container-7 { display: grid; place-items: center; padding: 1.875vw 0.625vw;
border: 0.2vw solid #0077cc;}
.element-7 {background: #0077cc; width: 12.5vw; height: 2.5vw;}
</style>
using CSS grid " "margin: auto" on grid item
code:
<div class="container-8">
<div class="element-8"></div>
</div>
<style>
.container-8 {display: grid; padding: 1.875vw 0.625vw; border: 0.2vw solid #0077cc;}
.element-8 {margin: auto; background: #0077cc; width: 12.5vw; height: 2.5vw;}
</style>
using CSS grid: "grid-row"
code:
<div class="container-9">
<div class="element-9"></div>
</div>
<style>
.container-9 {display: grid; grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr); padding: 1.875vw 0.625vw; border: 2px solid #0077cc; }
.container-9::before, .container-9::after {content: ""; }
.element-9 {background: #0077cc; height: 2.5vw; }
</style>
using CSS grid with pseudo-elements
code:
<div class="container-10">
<div class="element-10"></div>
</div>
<style>
.container-10 {display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);
padding: 1.875vw 0.625vw; border: 2px solid #0077cc; }
.container-10::before, .container-10::after {content: ""; }
.element-10 {background: #0077cc; height: 2.5vw; }
</style>
using absolute positioning
using absolute positioning : "position:absolute" - "margin:auto"
code:
<div class="container-11">
<div class="element-11">Centered</div>
</div>
<style>
.container-11 {position: relative; height: 40vh; border: 0.2vw solid #0077cc;}
.element-11 {position: absolute; inset: 0; margin: auto; height: 2.5vw;
/* Requires explicit height */ width: 7.5vw; background-color: #0077cc;
text-align: center; color: white; line-height: 2.5vw;}
</style>
using absolute positioning : "postion:absolute" - "translateY(-50%)
code:
<div class="container-12">
<div class="element-12">Centered</div>
</div>
<style>
.container-12 { position: relative; height: 40vh; border: 0.2vw solid #0077cc; }
.element-12 {position: absolute; top: 50%; left: 50%;transform: translate(-50%, -50%);
height: 2.5vw; width: 7.5vw; background-color: #0077cc; text-align: center;
color: white; line-height: 2.5vw;}
</style>
inline and table-based vertical alignment
inline/table-based: "display:table-cell" - "vertical-align"
code:
<div class="container-13">
<div class="element-13">Centered</div>
</div>
<style>
/* Container uses table display to allow vertical centering via table-cell */
.container-13 {display: table; width: 100%; height: 40vh; border: 0.2vw solid #0077cc;}
/* Inner element behaves like a table cell, allowing vertical centering */
.element-13 {display: table-cell; text-align: center; vertical-align: middle;}
</style>
inline/table-based: use "vertical-align" for inline elements
Text
Aligned
code:
<div class="container-14">
<span class="text">Text</span>
<img src="../images/24.jpg" class="image" alt="race car">
<span class="text">Aligned</span>
</div>
<style>
.container-14 {padding: 1.25vw; border: 0.2vw solid #0077cc;}
.image {vertical-align: middle; /* Aligns the image with the text */ width: 9.385vw;
margin: 0 0.75vw;}
</style>
inline/table-based: centering single-line text with "line-height"
Vertical Alignment
code:
<div class="container-15">
Vertical Alignment
</div>
<style>
.container-15 {line-height: 12.5vw; text-align: center; border: 0.2vw solid #0077cc; }
</style>
inline/table-based: ghost element method - 1
code:
<div class="container-16">
<div class="element-16">Centered</div>
</div>
<style>
.container-16 {display: block; height: 40vh; text-align: center;
/* Centers inline-block elements */ border: 0.2vw solid #0077cc;}
.container-16::before {content: ""; display: inline-block; height: 100%;
vertical-align: middle; margin-left: -0.5ch;}
.element-16 {display: inline-block; vertical-align: middle; background-color: #0077cc;
color: white; padding: 0.625vw 1.25vw;}
</style>
inline/table-based: ghost element method - 2
code:
<div class="container-17">
<div class="element-17">Centered</div>
</div>
<style>
.container-17 {display: block; height: 40vh; text-align: center;
/* Centers inline-block elements */ border: 0.2vw solid #0077cc; font-size: 0}
.container-17::before {content: ""; display: inline-block; height: 100%;
vertical-align: middle; margin-left: -0.5ch;}
.element-17 {display: inline-block; vertical-align: middle; font-size: 1vw;
background-color: #0077cc; color: white; padding: 0.625vw 1.25vw;}
</style>